import { Card, Descriptions, Image, Tag, Flex, Button, Skeleton } from "antd";
import { UserOutlined } from "@ant-design/icons";
import useCloseLoadingOnMount from "../../../utils/hook/useCloseLoadingOnMount";
import { getImagePath, getImagePath2, hb2 } from "../../../utils/common";
import ComponentHeader from "../../../components/Page/ComponentHeader";
import { useEffect, useState } from "react";
import goodsApi from "../../../apis/goodsApi"; // 假设使用商品API
import { useNavigate, useParams } from "react-router-dom";

const GoodDetail = () => {
  useCloseLoadingOnMount();
  const [good, setGood] = useState({});
  const [loading, setLoading] = useState(true);
  const navigate = useNavigate();
  const params = useParams();

  // 状态转换
  const statusMap = {
    0: { text: "下架", color: "red" },
    1: { text: "上架", color: "success" },
  };

  const promoteMap = {
    0: { text: "非促销", color: "default" },
    1: { text: "促销中", color: "orange" },
  };

  useEffect(() => {
    const fetchData = async () => {
      const res = await goodsApi.getGoodsDetail(params.id);
      if (res.status >= 0) {
        setGood(res.data);
      }
      setLoading(false);
    };
    fetchData();
  }, []);

  const handleEdit = () => {
    navigate("/good/edit/" + params.id);
  };

  return (
    <>
      {loading ? (
        <Skeleton active paragraph={{ rows: 10 }} />
      ) : (
        <Card>
          <ComponentHeader
            title={"商品详情"}
            marginBottom
            extra={
              <Button
                color="volcano"
                variant="filled"
                onClick={() => handleEdit()}
              >
                编辑
              </Button>
            }
          />
          <Flex gap={24} wrap="wrap">
            {/* 左侧信息栏 */}
            <Card style={{ flex: 1, minWidth: 300 }}>
              <Descriptions column={1} bordered>
                <Descriptions.Item label="商品名称">
                  {good.name}
                </Descriptions.Item>
                <Descriptions.Item label="所属店铺">
                  {good.supplierShopName}
                </Descriptions.Item>
                <Descriptions.Item label="商品类型">
                  {good.goodTypeName}
                </Descriptions.Item>
                <Descriptions.Item label="价格">
                  {good.price} 元
                </Descriptions.Item>
                <Descriptions.Item label="库存">
                  {good.inventory}
                </Descriptions.Item>
                <Descriptions.Item label="规格">{good.specs}</Descriptions.Item>
                <Descriptions.Item label="保质期">
                  {good.expiryday} 天
                </Descriptions.Item>
                <Descriptions.Item label="状态">
                  <Tag color={hb2(good.isShelve, (d) => statusMap[d].color)}>
                    {hb2(good.isShelve, (d) => statusMap[d].text)}
                  </Tag>
                  <Tag
                    color={hb2(good.isPromote, (d) => promoteMap[d].color)}
                    style={{ marginLeft: 8 }}
                  >
                    {hb2(good.isPromote, (d) => promoteMap[d].text)}
                  </Tag>
                </Descriptions.Item>
                <Descriptions.Item label="创建时间">
                  {good.createTimeStr}
                </Descriptions.Item>
                <Descriptions.Item label="更新时间">
                  {good.updateTimeStr}
                </Descriptions.Item>
              </Descriptions>
              {/* 商品描述 */}
              <Card title="商品描述" style={{ marginTop: 24 }}>
                <div style={{ whiteSpace: "pre-wrap" }}>{good.description}</div>
              </Card>
            </Card>

            {/* 右侧图片栏 */}
            <div style={{ flex: 1, minWidth: 300 }}>
              <Card title="商品主图" style={{ marginBottom: 24 }}>
                <Image
                  height={"200px"}
                  src={getImagePath2(good.id, good.photo)}
                />
              </Card>
              <Card title="商品详情图">
                <Flex gap={16} wrap="wrap">
                  {good.detailImages?.split(",").map((img, index) => (
                    <Image
                      height={"150px"}
                      key={index}
                      src={getImagePath2(good.id, img)}
                    />
                  ))}
                </Flex>
              </Card>
            </div>
          </Flex>
        </Card>
      )}
    </>
  );
};

export default GoodDetail;
